<template>
    <div class="demo-page-basic-vuexStudyDemo">
        <Button @click="modalSwitch = true;" v-privilege>显示对话框</Button>
        <div>
            用户输入的内容：{{$store.state.count}}
        </div>
        <Modal
            v-model="modalSwitch"
            title="普通的Modal对话框标题"
            >
            <Card :bordered="false">
                <p slot="title">无边框标题</p>
                <Input v-model="userInput" placeholder="请输入..." style="width: 300px"></Input>
                <Button @click="addCount">添加</Button>
                <Button @click="minusCount">减少</Button>
                <Button @click="updateCount">修改</Button>
            </Card>
        </Modal>

        <!-- 显示JavaScript代码 -->
        <pre>
            <code class="javascript">
export default {
        data () {
            ......
        },
        methods: {
            addCount: function (){
                this.$store.state.count++;
            },
            minusCount: function (){
                this.$store.state.count--;
            },
            updateCount: function (){
                this.$store.state.count = this.userInput;
            },
        }
    }
            </code>
        </pre>
        <!-- 显示HTML代码 -->
        <pre>
            <code class="html" v-text="htmlCode">
            </code>
        </pre>

    </div>

</template>
<script>
    import hljs from 'highlight.js'

    export default {
        mounted: function () {
            window.setTimeout(function () {
                $('.demo-page-basic-vuexStudyDemo pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 200);
        },
        data () {
            return {
                modalSwitch: false,
                userInput:"",
                htmlCode:`
                    <Modal
                        v-model="modalSwitch"
                        title="普通的Modal对话框标题"
                        >
                        <Card :bordered="false">
                            <p slot="title">无边框标题</p>
                            <Input v-model="userInput" placeholder="请输入..." style="width: 300px"></Input>
                            <Button @click="addCount">添加</Button>
                            <Button @click="minusCount">减少</Button>
                            <Button @click="updateCount">修改</Button>
                        </Card>
                    </Modal>
                `
            }
        },
        methods: {
            addCount: function (){
                this.$store.state.count++;
            },
            minusCount: function (){
                this.$store.state.count--;
            },
            updateCount: function (){
                this.$store.state.count = this.userInput;
            },
        }
    }
</script>
<style lang="scss">
    .demo-page-basic-vuexStudyDemo{

    }
</style>
